<template>
	<view>
		<view class="block__title">特殊人员跟进</view>
		<view class="cu-form-group">
			<view class="title">人员名称</view>
			<input v-model="name" disabled="" placeholder="请输入名称" class="text-right"></input>
		</view>
		<view class="cu-form-group arrow">
			<view class="title">登记日期</view>
			<picker mode="date" :value="bindDate" start="2020-09-01" end="2050-09-01" @change="dateChange">
				<view class="picker">
					{{bindDate}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group arrow">
			<view class="title">登记时间</view>
			<picker mode="time" :value="bindTime" start="08:30" end="22:00" @change="timeChange">
				<view class="picker">
					{{bindTime}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group margin-top">
			<textarea v-model="specialReason" placeholder="请输入近况说明"></textarea>
		</view>
		<view class="cu-form-group">
			<view class="title">是否有工作</view>
			<picker bindchange="PickerChange"
			:value="workIndex"
			:range-key="'name'"
			:range="hadWorks"
			v-if = "hadWorks.length>0"
			 @change="workChange">
				<view class="picker">
					{{hadWorks.length==0 ? "请选择" : hadWorks[workIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">负责人</view>
			<input v-model="workPerson" placeholder="请输入负责人" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">负责人联系电话</view>
			<input v-model="workPersonTel" placeholder="请填写负责人联系电话" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">工作地址</view>
			<input v-model="workAddress" placeholder="请输入工作地址" class="text-right"></input>
		</view>
		<view class="cu-form-group margin-top">
			<textarea v-model="ramark" placeholder="请输入备注"></textarea>
		</view>
		<view class="block__title">相关图片</view>

		<view class="cu-bar bg-white ">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/4
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(img,index) in imgList" :key='index' bindtap="ViewImage" :data-url="imgList[index]">
					<image :src='imgList[index]' mode='aspectFill'></image>
					<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class="cuIcon-cameraadd"></text>
				</view>
			</view>
		</view>
		<view class="button_up_blank"></view>
		<view class="flex flex-direction">
			<button class="cu-btn bg-green margin-tb-sm lg" @click="submitSpecialFollow()">提交</button>
		</view>

	</view>
</template>

<script>
	// pages/enterCommunity/enterCommunity.js
	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
	import {checkPhoneNumber} from '../../lib/java110/utils/StringUtil.js'
	import {savePhoneGovSpecialFollow} from '../../api/specialReportInfo/specialReportInfoApi.js'
	
	import {
		getAreaId
	} from '../../api/area/areaApi.js'
	export default {
		data() {
			return {
				bindDate: '请选择',
				bindTime: '请选择',
				name: '',
				specialPersonId: '',
				caId: '',
				specialStartTime: '',
				specialReason: '',
				isWork: '',
				workPerson: '',
				workPersonTel: '',
				workAddress: '',
				ramark: '',
				imgList: [],
				photos: [],
				index: 0,
				hadWorks: [
					{"name":"请选择","id":""},
					{"name":"有工作","id":"1"},
					{"name":"无工作","id":"0"},
					],
				workIndex: 0,
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			this.vc.onLoad(options);
			that.name = options.personName;
			that.specialPersonId = options.govPersonId;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			submitSpecialFollow: function(e) {
				let that = this;
				let obj = {
					"specialPersonId": this.specialPersonId,
					"name": this.name,
					"specialStartTime": this.bindDate + " " + this.bindTime + ":00",
					"photos": [],
					"specialReason": this.specialReason,
					"isWork": this.isWork,
					"workPerson": this.workPerson,
					"workPersonTel": this.workPersonTel,
					"workAddress": this.workAddress,
					"ramark": this.ramark,
					"photos": [],
					"caId": getAreaId(),
				}
				let _photos = this.photos;
				_photos.forEach(function(_item) {
					obj.photos.push({
						"photo": _item
					});
				});
				let msg = "";
				if (obj.name == "") {
					msg = "请填写名称";
				}else if (obj.bindDate == "请选择") {
					msg = "请选择发生日期";
				} else if (obj.bindTime == "请选择") {
					msg = "请选择发生时间";
				}else if (obj.specialReason == "") {
					msg = "请填写近况说明";
				} else if (obj.isWork == "") {
					msg = "请选择是否有工作";
				}else if (obj.workPerson == "") {
					msg = "请填写负责人";
				}else if (obj.workPersonTel == "") {
					msg = "请填写负责人联系电话";
				}else if (obj.workAddress == "") {
					msg = "请填写工作地址";
				}
				if (msg != "") {
					wx.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					});
				} else {
					savePhoneGovSpecialFollow(obj)
						.then(_data => {
							uni.showToast({
								icon: 'none',
								title: '保存成功'
							});
							wx.redirectTo({
								url:'/pages/specialFollow/specialFollow?govPersonId='+that.specialPersonId +"&personName="+that.name
							});
						}, err => {
							uni.showToast({
								icon: 'none',
								title: err
							})
						})
				}
			},
			workChange: function(e) {
				this.workIndex = e.target.value //取其下标
				let selected = this.hadWorks[this.workIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.isWork = selected.id //选中的id
			},
			afterRead: function(event) {
				const {
					file
				} = event.detail;

				let _that = this;
				const {
					photoList = []
				} = this;
				photoList.push(file);
				this.photoList = photoList;
				factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
					_that.photos.push(_baseInfo);
				});
			},
			deleteImage: function(e) {
				console.log(e);
				let imageArr = this.$data.imgList;
				imageArr.splice(e, 1);
				this.photos.splice(e, 1);
			},
			ChooseImage: function(e) {
				let that = this;
				wx.chooseImage({
					count: 4, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);
						that.$data.imgList.push(res.tempFilePaths[0]);
						var tempFilePaths = res.tempFilePaths[0]

						//#ifdef H5
						TanslateImage.translate(tempFilePaths, (url) => {
							that.photos.push(url);
						})
						//#endif

						//#ifdef MP-WEIXIN
						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
							that.photos.push(_res);
						});
						//#endif
					}
				});
			},
			dateChange: function(e) {
				this.bindDate = e.detail.value;
			},
			timeChange: function(e) {
				this.bindTime = e.detail.value;
			}
		}
	};
</script>
<style>
	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}
</style>
